<template>
    <div class="h-full overflow-hidden flex flex-col">
        <div class="flex-1 overflow-auto pt-[26px] pb-[80px] px-[56px]">
            <div class="flex flex-row items-center gap-[10px]">
                <div class="bg-theme w-1 h-5 rounded-xs"></div>
                <span class="text-theme text-[18px] font-bold">人才发展</span>
            </div>
            <section class="bg-[#F5F7FA] rounded-sm box-border p-4 mt-3 2xl:w-[750px]">
                <p class="text-sm text-primary">填写人才发展有什么用?</p>
                <p class="text-sm text-secondary mt-2">研究发现越来越多的求职者期望在工作中获得帮助与成长，完整的人才发展机制介绍可以有效吸引求职者。</p>
            </section>
            <section class="mt-6 2xl:w-[750px]">
                <div class="mb-8">
                    <h5 class="text-base font-medium text-primary mb-3">晋升制度</h5>
                    <ul class="flex flex-row flex-wrap gap-3">
                        <li class="touchable-opacity item"
                            :class="selects.includes(item.value) ? 'active-item' : ''"
                            v-for="item of Forwards" :key="item.value"
                            @click="handleItemTap(item)"
                        >
                            {{item.label}}
                            <div class="flag">
                                <GpFontIcon name="icon-gouxuan" class="icon" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mb-8">
                    <h5 class="text-base font-medium text-primary mb-3">人才激励</h5>
                    <ul class="flex flex-row flex-wrap gap-3">
                        <li class="touchable-opacity item"
                            :class="selects.includes(item.value) ? 'active-item' : ''"
                            v-for="item of Gifts" :key="item.value"
                            @click="handleItemTap(item)"
                        >
                            {{item.label}}
                            <div class="flag">
                                <GpFontIcon name="icon-gouxuan" class="icon" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mb-8">
                    <h5 class="text-base font-medium text-primary mb-3">能力培养</h5>
                    <ul class="flex flex-row flex-wrap gap-3">
                        <li class="touchable-opacity item"
                            :class="selects.includes(item.value) ? 'active-item' : ''"
                            v-for="item of Powers" :key="item.value"
                            @click="handleItemTap(item)"
                        >
                            {{item.label}}
                            <div class="flag">
                                <GpFontIcon name="icon-gouxuan" class="icon" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mb-8">
                    <h5 class="text-base font-medium text-primary mb-3">更多信息</h5>
                    <a-textarea placeholder="介绍更多相关信息，可以突出雇主品牌优势哦"
                        style="width: 100%;"
                        :maxlength="500"
                        show-count
                        :rows="6"
                        v-model:value="formState.developmentDescription"
                    />
                </div>
            </section>
        </div>
        <div
            class="px-[56px] box-border h-[88px] border-t border-solid border-t-[#EEEEEE] relative">
            <div class="flex flex-row justify-end items-center h-full 2xl:w-[750px]">
                <a-button type="primary" class="rounded-sm w-[124px]" size="large" :loading="formLoading"
                    @click="handleSubmit()">
                    保存
                </a-button>
            </div>
            <div
                class="text-[#ACAEB2] text-sm flex flex-row items-center gap-1 cursor-pointer absolute left-[56px] top-[34px]">
                上传注意事项
                <GpFontIcon name="icon-yiwen1" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { postCompanyinfoDevelopment } from '@/api/siderBar/companyInfo';
import type { CompanyDevelopmentRequest, CompanyInfoResult } from '@/api/siderBar/model';
import { message } from 'ant-design-vue';

defineOptions({
    name: "CompanyPerson"
})

type Props = Partial<CompanyInfoResult>
const props = defineProps<Props>()
const emit = defineEmits<{
    refresh: []
}>()
const formState = ref<CompanyDevelopmentRequest>({
    itemNameList: [],
    developmentDescription: ""
})
const formLoading = ref(false)
const Forwards: IOption<string>[] = [
    { value: "考核晋升", label: "考核晋升" },
    { value: "定期晋升", label: "定期晋升" },
    { value: "完善的晋升机制", label: "完善的晋升机制" },
]
const Gifts: IOption<string>[] = [
    { value: "定期普调", label: "定期普调" },
    { value: "定期绩效调薪", label: "定期绩效调薪" },
    { value: "晋级涨薪", label: "晋级涨薪" },
    { value: "项目奖金", label: "项目奖金" },
    { value: "团队奖金", label: "团队奖金" },
    { value: "个人奖金", label: "个人奖金" },
    { value: "绩效提成", label: "绩效提成" },
    { value: "股票期权", label: "股票期权" },
    { value: "人才补贴", label: "人才补贴" },
]
const Powers: IOption<string>[] = [
    { value: "老员工带新", label: "老员工带新" },
    { value: "导师一对一", label: "导师一对一" },
    { value: "岗前带薪培训", label: "岗前带薪培训" },
    { value: "内部定期培训", label: "内部定期培训" },
    { value: "专业技能培训", label: "专业技能培训" },
    { value: "内部课程资源", label: "内部课程资源" },
    { value: "大牛带队", label: "大牛带队" },
    { value: "人脉积累", label: "人脉积累" },
    { value: "国内外进修", label: "国内外进修" },
    { value: "校招培养", label: "校招培养" },
]
const {
    selects,
    handleItemTap,
} = useOptionSelect<string>({
    mode: "multiple",
    treatAll: false,
    availableOptions: [...Forwards, ...Gifts, ...Powers],
    rollbackSync: false,
    syncSelects(selects) {
        formState.value.itemNameList = [...selects]
    },
})
watch(() => props.development, () => {
    populate()
}, {
    immediate: true
})
function populate() {
    if (props.development) {
        const { developmentDescription, itemNameList } = props.development
        if (itemNameList && itemNameList.length > 0) {
            formState.value.itemNameList = itemNameList.slice()
            selects.value.push(...itemNameList)
        } else {
            formState.value.itemNameList = []
        }
        formState.value.developmentDescription = developmentDescription ?? ""
    }
}
async function handleSubmit() {
    formLoading.value = true
    try {
        await postCompanyinfoDevelopment(formState.value)
        message.success('修改成功')
        formLoading.value = false
        emit('refresh')
    } catch (error) {
        formLoading.value = false
    }
}
</script>
<style lang="less" scoped>
@reference "../../../../../../assets/styles/tailwind.css";

.item {
    height: 48px;
    border: 1px solid #E8EBF5;
    padding-inline: 20px;
    color: var(--color-primary);
    @apply relative overflow-hidden rounded-sm text-base flex flex-row justify-center items-center;
    &:hover {
        color: var(--color-theme);
    }
    &.active-item {
        border-color: var(--color-theme);
        background: #0768fa0a;

        .flag {
            display: block;
        }
    }

    .flag {
        display: none;
        width: 32px;
        height: 20px;
        border-inline-width: 16px;
        border-block-width: 10px;
        border-color: transparent;
        border-style: solid;
        border-block-start-color: var(--color-theme);
        border-inline-end-color: var(--color-theme);
        @apply absolute box-border top-0 right-0;

        .icon {
            color: white;
            position: absolute;
            top: -12px;
            right: -12px;
            font-size: 12px;
        }
    }
}
</style>